import React ,{ PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
import { Link }  from 'react-router-dom'

import {
   ArticleItem ,
   ArticleInfo ,
   LoadMore ,
 } from '../style'


class List extends PureComponent {

    render(){

     const { list,page ,getMoreList } = this.props;

      return (
        <div>
          {

            list.map((item,index) =>{
              return (
                <Link to ={'/detail/' + item.get('id') }  key = {index} >
                <ArticleItem>
                   <img
                      className ="pic"
                      src  = {item.get('imgUrl')}
                      alt=""
                     />
                     <ArticleInfo>
                       <h3 className ="title">{item.get('title')} </h3>
                       <p className ="desc">{item.get('desc')}</p>
                     </ArticleInfo>
                </ArticleItem>
                </Link>
              )

            })

          }
         <LoadMore onClick = {()=> getMoreList(page) }>加载更多</LoadMore>
        </div>

      )

    }

}
const mapState = (state) => ({
      list: state.getIn(["home","articleList"]),
      page:state.getIn(["home","articlePage"])
});

const mapDispatch = (dispatch) =>({

   getMoreList(page){
     dispatch(actionCreators.getMoreDateList(page))
   }

})

export default connect(mapState,mapDispatch)(List);
